fix(chart): wire chart-styles CSS so custom tooltips are actually visible#17
Merged
Conversation
Enhanced the CI workflow to verify the presence of chart-styles CSS and ensure it is correctly linked in App.razor. This prevents issues with invisible text on chart hover and improves the robustness of the installation process.
…yles dependency Adjusted the file path in ChartStylesTemplate to correctly reference the CSS file location. Additionally, updated the ChartTemplate to include "chart-styles" in its dependencies, ensuring proper integration of chart styles within the ShellUI theme system.
…unctionality Introduced comprehensive unit tests for the ChartStylesRegistry and StylesheetInjection classes. The tests validate the registration and dependencies of chart styles, ensure correct file path targeting, and verify the functionality of stylesheet injection methods, enhancing overall test coverage and reliability of the ShellUI component system.
Enhanced the ComponentInstaller to automatically wire installed stylesheets from wwwroot into the host, eliminating the need for manual <link> tag additions. Introduced a new method, ResolveHostStylesheetHref, to determine the correct href for stylesheets, streamlining the integration of CSS assets into the ShellUI component system.
Updated the ComponentRegistry to include the "chart-styles" component, enhancing the template system by ensuring it is registered and its content is accessible. This addition supports improved styling options for charts within the ShellUI framework.
Added methods to inject stylesheet links into the host files (App.razor and index.html) for newly installed components, streamlining the integration of CSS assets. This enhancement automates the process of linking stylesheets, improving user experience by eliminating the need for manual edits after installation.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
After
shellui add chart, hovering any chart point showed an invisible tooltip — values appeared white-on-white because the custom HTML emitted by ApexCharts referenced.custom-tooltip-*classes that nothing styled. The CSS to style them already existed inChartStylesTemplatebut was three different kinds of broken: not registered inComponentRegistry, not declared as a dependency ofchart, and configured with aFilePaththat would have written the file intoComponents/UI/wwwroot/css/(unreachable by the browser) instead of project-rootwwwroot/css/.This PR makes
shellui add chartdeliver the CSS that already existed, and auto-wires the<link>tag into the host so the user doesn't have to editApp.razorby hand.Changes
Wire chart-styles end-to-end
src/ShellUI.Templates/Templates/ChartStylesTemplate.cs—FilePathchanged fromwwwroot/css/charts.css(which got combined withComponents/UI/for a broken final path) to../../wwwroot/css/charts.css. Same path-traversal trick the existingshellui-jstemplate already uses to escape the component tree.src/ShellUI.Templates/Templates/ChartTemplate.cs—chart-stylesadded toDependenciesalongsidechart-variants. Every chart-family component transitively depends onchart, so they all pick up the CSS through the recursive walk.src/ShellUI.Templates/ComponentRegistry.cs—chart-stylesregistered in both the metadata dictionary and theGetComponentContentswitch. Same orphan class asdata-table-modelsin branch 4 — file existed on disk, never reachable via the CLI.Auto-link stylesheets in the host
src/ShellUI.CLI/Services/InitService.cs— newInjectStylesheetLink(content, href)andInjectStylesheetIntoHostAsync(href)helpers. PatchesComponents/App.razor(Blazor Web App / Server / SSR) orwwwroot/index.html(WASM standalone), idempotently. Lives alongside the existingRewriteAppRazor/RewriteWasmIndexHtmlhelpers from branch 3 — same patterns, same testing approach.src/ShellUI.CLI/Services/ComponentInstaller.cs— afterInstallComponentsfinishes installing source files and NuGet deps, it walks the installed set, callsResolveHostStylesheetHrefon eachFilePath, and injects<link>tags for any CSS asset that lives under../../wwwroot/. Generic by design — any future asset CSS template gets the same treatment automatically, no per-component special case.Out of scope (deferred)
Per discussion: the "ApexCharts chrome restyle" (replacing default legend/axis text styling with Tailwind-classed equivalents) is a future branch. This PR ships only the CSS that makes the custom tooltip readable — Fix 13 in the notes — which was the alpha.4 blocker. The shadcn-quality restyle stays on the roadmap.
Tests (10 new)
ShellUI.Tests/ChartStylesTests.cs:Registry wiring:
chart-stylesis registered andIsAvailable = falsechartdepends onchart-styleschart-styles.FilePathstarts with../../wwwroot/and ends with.css.custom-tooltip-*classes, the key.apexcharts-*classes (apexcharts-tooltip,apexcharts-legend,apexcharts-xaxis-label), and is theme-aware (usesvar(--popover),var(--foreground),var(--border))Link injector:
ResolveHostStylesheetHrefstrips../../wwwroot/from a CSS asset pathnullfor non-CSS file paths and for non-wwwroot CSS pathsnullfor../../wwwroot/shellui.js(script, not stylesheet)InjectStylesheetLinkplaces the tag inside<head>(positionally verified)InjectStylesheetLinkis idempotent — running twice produces identical outputCI
.github/workflows/ci.ymlsmoke step:test -f wwwroot/css/charts.css— the CSS file actually landedgrep -q '<link href="css/charts.css"' Components/App.razor— App.razor was patchedVerification
dotnet test ShellUI.Tests— 53/53 passing (10 new + 43 from previous branches)dotnet build src/ShellUI.CLI— cleanTest plan
dotnet new blazor→ install the prerelease CLI tool →shellui init→shellui add chart→dotnet buildsucceeds. Check thatwwwroot/css/charts.cssexists andComponents/App.razorhas<link href="css/charts.css" rel="stylesheet" />in<head>. Visit a page rendering a<Chart>and confirm the tooltip is readable (theme-aware popover background, foreground text, no more white-on-white)shellui add charta second time — confirm the link tag isn't double-injected (idempotency)wwwroot/index.htmlis patched instead ofApp.razor